<template>
  <div :id="targetId"></div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { mapServer } from '../../api/installServer';
import MapCommon from '../../util/MapCommon';
import MapComponent2D from '../../gis/Map';
import publishObjectPath from '@/util/configRegistry';
@Component({
  name: 'Map2D',
  mixins: [MapCommon],
})
export default class Map2D extends Vue {
  public getMap: any = null;

  @Prop() public targetId: any;

  private async mounted() {
    // 符号配置
    const symbolConfigRes = await mapServer.getConfig('./json/symbol.json');
    this.registGlobal('symbolConfig', symbolConfigRes.data);
    // 地图配置
    const mapConfigRes = await mapServer.getConfig('./json/map.json');
    this.registGlobal('mapConfig', mapConfigRes.data);
    //
    const map2d = new MapComponent2D({
      targetId: this.targetId,
      mapConfig: mapConfigRes.data,
      serviceConfig: publishObjectPath.value,
      symbolConfig: symbolConfigRes.data,
    });
    map2d.init();
    //
    const gisComponents = map2d.createComponents();
    this.registGlobal('GISComponents', gisComponents);
    //
    const bizComponents = map2d.createBusinessComponents({});
    this.registGlobal('GISModules', bizComponents);
    // 地图加载完成后，注册地图变量，触发地图加载完成事件
    const map = map2d.getMap();
    const self: any = this;
    self.registMap(map, this.targetId);
  }

  private registGlobal(key: string, value: any) {
    const temp: any = this;
    temp.$ioc.register(`${key}-${this.targetId}`, value);
  }

  private resolveGlobal(key: string) {
    const temp: any = this;
    return temp.$ioc.resolve(`${key}-${this.targetId}`);
  }
}
</script>
<style>
#map {
  width: 100%;
  height: 100%;
}
/* ts-gis */
.ol-unselectable .ol-scale-line-inner {
  width: 117px;
  position: absolute;
  bottom: -3px;
  color: #dfdfdf;
  border: 1px solid #eee;
  border-top: none;
  background: rgba(0, 60, 136, 0.5);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  left: 20px;
  height: 18px;
}
/*ts-gis*/
.ol-zoom.ol-unselectable.ol-control {
  position: absolute;
  top: 300px;
  right: 20px;
  left: inherit;
}
</style>
